﻿<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Publish Notes</title>
  <link rel="stylesheet" href="styles/index.css">
</head>
<body>
<div id="app">
  <table style="width: 100%;">
    <tr>
      <td colspan="2">
        <strong><span id="labelDocuments">Notes</span></strong>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <span>&nbsp;&nbsp;{{documentTitleList}}</span>
      </td>
    </tr>
    <!--Server Information-->
    <tr>
      <td colspan="2">
        <strong><span id="labelServerInformation">Server Information</span></strong>
      </td>
    </tr>
    <tr>
      <td id="labelBlogType" align="right">
        BlogType
      </td>
      <td>
        <select id="selectBlogType" v-model="blogTypeSelected">
          <option :value="item" v-for="item in blogTypeList">{{item}}</option>
        </select>
      </td>
    </tr>
    <tr>
      <td id="labelAddress" align="right">
        Url
      </td>
      <td>
        <input id="textAddress" type="text" v-model="url" />
        <input id="buttonAPIHelp" type="button" value="Help" onclick="return buttonAPIHelp_onclick()" /></td>
    </tr>
    <tr>
      <td id="labelUserName" align="right">
        User Name
      </td>
      <td>
        <input id="textUserName" type="text" v-model="username" />
      </td>
    </tr>
    <tr>
      <td id="labelPassword" align="right">
        Password
      </td>
      <td>
        <input id="textPassword" type="password" v-model="password" />
      </td>
    </tr>
    <tr>
      <td id="labelSecret" align="right">
        Secret/Token
      </td>
      <td>
        <input id="textSecret" type="password" v-model="token" />
      </td>
    </tr>
    <tr>
      <td id="labelHint" align="right" style="color: red">
        Hint
      </td>
      <td>
        <p id="textHint">{{hint}}</p>
      </td>
    </tr>
    <!--Operation-->
    <tr>
      <td colspan="2">
        <strong><span id="labelOperation">Operation</span></strong>
      </td>
    </tr>
    <tr>
      <td id="labelAction" align="right">
        Action
      </td>
      <td>
        <select id="selectAction" v-model="actionSelected">
          <option :value="item" v-for="item in actionList">{{item}}</option>
        </select>
      </td>
    </tr>
  </table>

  <p align="right">
    <input id="buttonOK" @click="submit" style="width: 70px;"
           type="button" value="OK" />&nbsp;
    <input id="buttonCancel" @click="cancel" style="width: 70px;"
           type="button" value="Cancel" />
  </p>
  <p>
    <span id="labelStatus"></span>
  </p>
</div>

<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/publish-blog.js"></script>
</body>
</html>
